import React, { Component } from 'react';
import { NavBar, Ellipsis } from 'antd-mobile'
import '../style/Searchlist.scss'
import service from '../api';


class SearchList extends Component<any, any> {
    constructor(props: any) {
        super(props);
        this.state = {
            searchList: [],
            value: '',
        }
    }



    // // 点击搜索
    async goSearch() {
        var res = await service.pro.search({ keyword: this.state.value })
        console.log(res);
        this.setState({ searchList: res.data.data }, () => { console.log(this.state.searchList); })

    }

    // 去详情页
    toDetail(id: any) {
        this.props.history.push({ pathname: '/detail', state: { id } })
    }

    render() {
        let list = null
        if (this.state.searchList && this.state.searchList.length == 0) {
            list = this.props.location.state.searchList
        } else {
            list = this.state.searchList
        }
        return (
            <div className='searchlist'>

                <div className="top">
                    <NavBar onBack={() => { this.props.history.go(-1) }}>
                        <input value={this.state.value} onChange={(e) => this.setState({ value: e.target.value })} type="text" placeholder='请输入搜索内容' />
                        <button onClick={() => { this.goSearch() }}>搜索</button>
                    </NavBar>
                </div>


                <div className="box">
                    {
                        list.map((item: any, index: any) => {
                            return (
                                <div className="box1" key={index} onClick={() => { this.toDetail(item.proid) }}>
                                    <div className="left">
                                        <img src={item.img1} alt="" />
                                    </div>
                                    <div className="right">
                                        <Ellipsis rows={2} direction='end' content={item.proname} />
                                        <div className="price">
                                            ¥:{item.originprice}
                                        </div>
                                    </div>
                                </div>
                            )
                        })
                    }
                </div>
            </div>
        );
    }
}

export default SearchList;